<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item, index) in menuList" :key="index" @mouseenter="mouseenter(item)">
        <i :class="item.type"></i>
        {{ item.name }}
        <span class="arrow"></span>
      </dd>
    </dl>
    <div v-if="curDetail" class="detail" @mouseenter="detailTimer" @mouseleave="leave">
      <template v-for="(item, index) in curDetail.items">
        <h4 :key="index">{{ item.title }}</h4>
        <span v-for="(v, i) in item.items" :key="v + '_' + i">{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import api from '@/api/index';

export default {
  data() {
    return {
      timer: null,
      curDetail: null,
      menuList: [
        // {
        //   title: '美食',
        //   icon: 'food',
        //   children: [
        //     {
        //       title: '美食',
        //       children: [
        //         '代金券',
        //         '甜点饮品',
        //         '火锅自助餐',
        //         '小吃快餐',
        //         '日式料理',
        //         '火鸡面',
        //         '北京烤鸭',
        //       ],
        //     },
        //   ],
        // },
        // {
        //   title: '外卖',
        //   icon: 'takeout',
        //   children: [
        //     {
        //       title: '外卖',
        //       children: ['美团外卖', '饿了么外卖'],
        //     },
        //   ],
        // },
        // {
        //   title: '酒店',
        //   icon: 'hotel',
        //   children: [
        //     {
        //       title: '酒店',
        //       children: ['经典型', '舒适型', '豪华型', '总统套房'],
        //     },
        //   ],
        // },
      ],
    };
  },
  methods: {
    mouseenter(item) {
      this.curDetail = item;
    },
    mouseleave() {
      const that = this;
      this.timer = setTimeout(() => {
        that.curDetail = null;
      }, 200);
    },
    detailTimer() {
      clearTimeout(this.timer);
    },
    leave() {
      this.curDetail = null;
    },
  },
  created() {
    api.navList().then((res) => {
      this.menuList = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/index/index.scss';
</style>
